<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <h2>内容目录</h2>
    <ul>
      <li><a href="#font-end">前端开发简介</a></li>
      <li><a href="#history">发展历程</a></li>
      <li><a href="#core-tech">核心技术</a></li>
      <li><a href="#opti">优化</a></li>
    </ul>

    <h1 id="font-end">前端开发</h1>
    <p>
      前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互
      。
    </p>
    <p>
      它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
    </p>
    <p>
      移动互联网带来了大量高性能的移动终端设备以及快速的无线网络，HTML5，node.jS的广泛应用，各类框架类库层出不穷。
    </p>
    <h2 id="history">发展历程</h2>
    <ul>
      <li>前端技术的发展是互联网自身发展变化的一个缩影。</li>
      <li>
        前端技术指通过浏览器到用户端计算机的统称，存贮于服务器端的统称为后端技术。
      </li>
      <li>前端开发主要职能就是把网站的界面更好地呈现给用户。</li>
      <li>
        以前会Photoshop和Dreamweaver就可以制作网页，随着网站开发难度加大、开发方式多样，网页制作更接近传统的网站后台开发，网页制作更多被称为Web前端开发。
      </li>
      <li>
        前端技术包括4个部分：前端美工、浏览器兼容、CSS、HTML“传统”技术与Adobe
        AIR、Google Gears,以及概念性较强的交互式设计，艺术性较强的视觉设计等。
      </li>
      <li>
        在Web1.0时代，由于网速和终端能力的限制，大部分网站只能呈现简单的图文信息，并不能满足用户在界面上的需求，对界面技术的要求也不高。随着硬件的完善、高性能浏览器的出现和宽带的普及，技术可以在用户体验方面实现更多种可能，前端技术领域迸发出旺盛的生命力。
      </li>
      <li>
        2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
      </li>
      <li>
        随着手机成为人们生活中不可或缺的一部分，成为人们身体的延伸，人们迎来了体验为王的时代。移动端的前端技术开发前景宽阔。此外，前端技术还能应用于智能电视、智能手表甚至人工智能领域。
      </li>
    </ul>
    <h2 id="core-tech">核心技术</h2>
    <h3>HTML语言</h3>
    <p>
      掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。
    </p>
    <p>
      HTML是一种标记语言，能够实现Web页面并在浏览器中显示。HTML5作为HTML的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。
    </p>
    <p>
      随着CSS、JavaScript、Flash等技术的发展，Web对于应用的处理能力逐渐增强，用户浏览网页的体验已经有了较大的改善。不过HTML5中的几项新技术实现了质的突破，使得Web技术首次被认为能够接近于本地原生应用技术，开发Web应用真正成为开发者的一个选择。
    </p>
    <p>
      HTML5可以使开发者的工作大大简化，理论上单次开发就可以在不同平台借助浏览器运行，降低开发的成本，这也是产业界普遍认为HTML5技术的主要优点之一。AppMobi、摩托罗拉、Sencha、Appcelerator等公司均已推出了较为成熟的开发工具，支持HTML5应用的发展。
    </p>
    <h3>CSS</h3>
    <p>
      学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。
    </p>
    <h3>JavaScript</h3>
    <p>
      学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。
    </p>
    <h3>操作系统</h3>
    <p>
      了解Unix和Linux的基本知识，对于开发人员有益无害。
    </p>
    <h3>网络服务器</h3>
    <p>
      了解Web服务器，包括对Apache的基本配置，htaccess配置技巧的掌握等。
    </p>
    <h2 id="opti">优化</h2>
    <ol>
      <li>尽量减少HTTP请求 (Make Fewer HTTP Requests)</li>
      <li>减少DNS 查找 (Reduce DNS Lookups)</li>
      <li>避免重定向 (Avoid Redirects)</li>
      <li>使得 Ajax 可缓存 (Make Ajax Cacheable)</li>
      <li>延迟载入组件 (Post-load Components)</li>
      <li>预载入组件 (Preload Components)</li>
      <li>减少DOM元素数量 (Reduce the Number of DOM Elements)</li>
      <li>切分组件到多个域 (Split Components Across Domains)</li>
      <li>最小化iframe的数量 (Minimize the Number of iframes)</li>
      <li>杜绝 http404错误 (No 404s)</li>
    </ol>
    <p>
      以上10条涵盖了Web前端开发中遇到的各种页面处理技术，让前端开发人员能够准确和快速地把握整个网页的架构，从而达到减少开发成本和页面美化目的。
    </p>
    <div style="height:800px;"></div>
  </body>
</html>
